<template>
  <div class="app-wait-audit">
    <TablePage
      ref="msgTable"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :isIndex="false"
      :isSelection="true"
      :total="pages.total"
      :pageSize="pages.pageSize"
      :currentPage="pages.pageNum"
      :isSingle="true"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
      class="msgTable"
    >
      <template #handle>
        <el-button class="m_96" type="primary" @click="handleAudit(1)" v-hasPermi="['CentralControl.WaitedMessage.AuditSuccessd']">通过</el-button>
        <el-button class="m_96" @click="handleAudit(0)" v-hasPermi="['CentralControl.WaitedMessage.AuditFailed']">驳回</el-button>
      </template>

      <template slot="content" slot-scope="{ row }">
        <span class="links" @click="toCustomerDetail(row)">{{ row.content }}</span>
      </template>
    </TablePage>

    <el-dialog width="470px" class="app-dialog" title="审核" :visible.sync="visible" :before-close="handleClose">
      <div class="container">
        <Form ref="auditForm" v-model="auditData" :config="auditConfig" label-width="80px" label-position="top" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Form from '@/components/Form'
import TablePage from '@/components/TablePage'
import { getMessageSate, auditSuccessd, auditFaild } from '@/api/message'
export default {
  name: 'WaitAudit',
  components: { TablePage, Form },
  data: function () {
    return {
      visible: false,
      auditData: {},
      auditConfig: [
        {
          label: '审核结果',
          type: 'radio',
          prop: 'result',
          options: [
            { label: '通过', value: 1 },
            { label: '驳回', value: 0 },
          ],
          rules: [{ required: true, trigger: 'change', message: '请选择审核结果' }],
        },
        {
          label: '审核驳回原因',
          type: 'textarea',
          prop: 'node',
          hide: 'result',
          hideValue: [0],
          rules: [{ required: true, trigger: 'change', message: '请输入驳回原因' }],
        },
      ],
      selections: {},
      queryParams: {},
      tableData: [],
      tableColumn: [
        {
          label: '消息标题',
          prop: 'title',
          type: 'yuanText',
          colors: [
            { color: '#ee3333', value: false },
            { color: 'green', value: true },
          ],
          by: 'isRead',
        },
        {
          label: '消息内容',
          prop: 'content',
          // type: 'linkText',
          render: true,
        },
        {
          label: '时间',
          width: '250px',
          prop: 'sendTime',
        },
      ],
      pages: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      const params = {
        type: [0],
        isDetails: true,
        SkipCount: ((this.pages.pageNum <= 1 ? 1 : this.pages.pageNum) - 1) * this.pages.pageSize,
        MaxResultCount: this.pages.pageSize,
        ...this.queryParams,
      }
      getMessageSate(params).then(res => {
        this.tableData = res.items
        this.pages.total = res.totalCount
      })
    },
    handleSelectionChange(selection) {
      this.selections = selection[0]
    },
    handleAudit(result) {
      if (this.selections && JSON.stringify(this.selections) !== '{}') {
        this.visible = true
        this.auditData = { result }
      } else {
        this.$message.info('请选择操作数据')
      }
    },
    handleSubmit() {
      this.$refs.auditForm.validate().then(valid => {
        let category
        const { noticeBusinessType } = this.selections
        if (noticeBusinessType == 1) category = 1
        if (noticeBusinessType == 12) category = 2
        if (noticeBusinessType == 15) category = 3
        if (!valid) return
        if (this.auditData.result == 0) {
          auditFaild({ category, id: this.selections.dataId, node: this.auditData.node }).then(res => {
            this.$message.success('操作成功')
            this.visible = false
            location.reload()
          })
        }
        if (this.auditData.result == 1) {
          auditSuccessd({ category, id: this.selections.dataId }).then(res => {
            this.$message.success('操作成功')
            this.visible = false
            location.reload()
            // this.getTableData()
          })
        }
      })
    },
    handleClose() {
      this.visible = false
      this.$refs.auditForm.resetFields()
    },
    handleSizeChange(v) {
      this.pages.pageSize = v
      this.pages.pageNum = 1
      this.getTableData()
    },
    handleCurrentChange(v) {
      this.pages.pageNum = v
      this.getTableData()
    },
    toCustomerDetail(row) {
      let { noticeBusinessType, dataId } = row
      let { CustomerClueId } = row.dataOther
      let array = [6, 7, 8, 9]
      let query = {
        noticeBusinessType,
        dataId,
      }
      if (array.includes(noticeBusinessType)) {
        query.dataId = CustomerClueId
      }
      this.$router.push({
        path: '/customer-app/customer',
        query,
      })
    },
  },
}
</script>

<style lang="scss" scope>
.btns {
  padding: 0.2rem 0.3rem;
  box-sizing: border-box;
  .el-button {
    width: 0.96rem;
    font-size: 14px;
    // color: #333333;
    margin-right: 0.09rem;
  }
}

.msgTable {
  .links {
    color: #0076ff;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
